<template>
  <div class="top-bar">
    <el-dropdown size="mini" @command="handleCommand" split-button type="primary" class="user-styl">
      {{userId}}
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import { removeToken, getUserName} from "@/utils/auth";
export default {
  name: "layoutHeader",
  data() {
    return {
      activeIndex: "",
      activeIndex2: "",
      userId: ""
    };
  },
  mounted() {
    // this.userId = getUserId();
    this.userId = getUserName();
    console.log(getUserName());

  },
  methods: {
    handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleCommand(command) {
      if (command === "logout") {
        removeToken();
        this.$router.push("/");
      }
    }
  }
};

</script>
<style>
.top-bar {
  height: 40px;
  background: rgb(84, 92, 100);
  position: absolute;
  width: 100%;
  z-index: 9;
}

.user-styl {
  position: absolute;
  right:2%;
  top: 6px;
}

</style>
